Vuetify — Treeview Customizations

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Shaped

We can make a treeview with rounded borders on one side of the nodes.

For instance, we can write:

<template>
  <v-treeview :items="items" shaped hoverable activatable></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome" },
        ],
      },
      {
        id: 5,
        name: "Framework",
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap" },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn" },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

Then the corners will be rounded on the right side.

Rounded

The treeview nodes can be made rounded with the rounded prop:

<template>
  <v-treeview :items="items" rounded hoverable activatable></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome" },
        ],
      },
      {
        id: 5,
        name: "Framework",
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap" },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn" },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

Disabling Nodes

We can disable nodes with the item-disabled prop.

The value of the prop is the property name that indicates the item is disabled.

For example, we can write:

<template>
  <v-treeview :items="items" selectable item-disabled="locked"></v-treeview>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        id: 1,
        name: "Applications",
        children: [
          { id: 2, name: "Calendar" },
          { id: 3, name: "Chrome", locked: true },
        ],
      },
      {
        id: 5,
        name: "Framework",
        locked: true,
        children: [
          {
            id: 6,
            name: "vuetify",
            children: [
              {
                id: 7,
                name: "src",
                children: [
                  { id: 8, name: "index" },
                  { id: 9, name: "bootstrap", locked: true },
                ],
              },
            ],
          },
          {
            id: 10,
            name: "material",
            children: [
              {
                id: 11,
                name: "src",
                children: [
                  { id: 12, name: "v-btn", locked: true },
                  { id: 13, name: "v-card" },
                ],
              },
            ],
          },
        ],
      },
    ],
  }),
};
</script>

to make the locked property disable items on the treeview.

Conclusion

We can change the shape of a treeview and disable items with Vuetify.